<template>
    <Card :padding="10" dis-hover>
        <Row>
            <Col>
            <Form :model="formItem" ref="form" :label-width="100" inline style="padding-top:8px;">
                <FormItem label="院区名称" prop="areaID">
                    <AreaSelect @areaChg="areaChg"></AreaSelect>
                </FormItem>

                <FormItem label="科室" prop="categoryName"><Input v-model="formItem.categoryName" placeholder=""
                        style="width: 200px" />
                </FormItem>

                <FormItem label="医疗组" prop="categoryGroupName"><Input v-model="formItem.categoryGroupName"
                        placeholder="" style="width: 200px" />
                </FormItem>
            </Form>
            </Col>
            <Col>
            <Space><Button type="primary" icon="ios-search" @click="searchList">搜索</Button><Button type="error"
                    @click="clear" icon="md-refresh">重置</Button><Button type="success" @click="add(1, {})"
                    icon="md-add">新增</Button><Button type="info" @click="joinGroup" icon="md-add">归为医疗组</Button>
                <Button type="dashed" @click="del" icon="ios-trash">批量删除</Button>
                <Upload ref="upload" :action="upload_url" :headers="headers" :on-success="handleSuccess"
                    :on-progress="handleProgress" style="padding-top:9px;">
                    <Button type="info" icon="md-cloud-upload">导入</Button>
                </Upload>
            </Space>
            </Col>
        </Row>


        <Row>
            <Col span="4" style="padding-right: 10px;">
            <Card>
                <template #title>
                    <Icon type="ios-eye"></Icon>预览科室
                </template>
                <Tree :data="treeList.data" @on-select-change="treeChg"></Tree>
            </Card>
            </Col>
            <Col span="20">
            <Table ref="tbl" :paras="{
                columns: table.columns,
                data: table.data,
                loading: table.load,
                pageNo: formItem.pageNo,
                pageSize: formItem.pageSize,
            }" @on-selection-change="selChg">
                <template #IsGroup="{ row }">
                    <Tag color="blue" v-if="row.isGroup">是</Tag>
                    <Tag color="red" v-if="!row.isGroup">否</Tag>
                </template>
                <template #Action="{ row }">
                    <Space>
                        <Tooltip content="编辑" placement="top" transfer><Button type="primary" icon="md-create"
                                @click="add(2, row)"></Button></Tooltip>
                        <Poptip transfer confirm title="是否删除?" @on-ok="cancel(row.categoryID)" @on-cancel="cancel"
                            ok-text="是" cancel-text="否">
                            <Tooltip content="删除" placement="top" transfer><Button type="error"
                                    icon="md-close-circle"></Button></Tooltip>
                        </Poptip>
                    </Space>
                </template>
            </Table>
            <Pager :paras="{ total: table.total, page: formItem.pageNo, size: formItem.pageSize }" @toPage="initList"
                @toSize="initList">
            </Pager>
            </Col>
        </Row>
    </Card>
    <AddOrUpdate ref="modal" @initList="initList(1, 15)" @initTreeList="initTreeList"></AddOrUpdate>
</template>
<script setup>
import http from '@/util/http'
import { reactive } from 'vue'
import Table from '@/components/system/Table.vue'
import Pager from '@/components/system/Pager.vue'
import AddOrUpdate from './AddOrUpdate.vue'
import AreaSelect from '@/components/system/AreaSelect.vue'
import _ from 'lodash'
let { proxy } = getCurrentInstance()
let form = ref()
let treeList = reactive({ data: [] })
let modal = ref()
let areaList = reactive([])
let formItem = reactive({
    areaID: '',
    categoryName: '',
    categoryGroupName: '',
    pageSize: 15,
    pageNo: 1,
})
let tbl = ref()

let upload_url = import.meta.env.VITE_BASEURL + "/api/Basic/Category/Import"
var token = sessionStorage.getItem("token");
var tenantID = sessionStorage.getItem("tenant");

let headers = {
    Authorization: "Bearer " + token,
    TenantID: tenantID,
};

const handleSuccess = (res, file) => {
    proxy.$Message.success(res.msg)
    proxy.$Spin.hide()
    initList(1, 15)
    upload.value.clearFiles();
}


const handleProgress = (event, file, fileList) => {
    proxy.$Spin.show()
}

const initAreaList = () => {

    http.get('/Basic/Area/List', {}, (response) => {
        areaList = response.data.data
    })
}
initAreaList();

const initTreeList = () => {
    http.get('/Basic/Category/TreeList?areaID=' + formItem.areaID, {}, (response) => {
        treeList.data = response.data.data
    })
}

const areaChg = (output) => {
    formItem.areaID = output.value
}

const searchList = () => {
    initList(1, 15)
    initTreeList()
}
let table = reactive({
    data: [],
    total: 0,
    columns: [
        {
            type: 'selection',
            width: 60,
            align: 'center'
        },
        {
            title: '所属院区',
            align: 'center',
            key: 'areaName',
        },
        {
            title: '院内科室名称',
            align: 'center',
            key: 'name',
        },
        {
            title: '院内科室代码',
            align: 'center',
            key: 'code',
        }, {
            title: '标准科室名称',
            align: 'center',
            key: 'name1',
        }, {
            title: '标准科室代码',
            align: 'center',
            key: 'code1',
        },
        {
            title: '是否为医疗组',
            align: 'center',
            key: 'isGroup',
            slot: "IsGroup"
        },
        {
            title: '添加时间',
            align: 'center',
            width: 200,
            key: 'addTime',
        },
        {
            title: '修改时间',
            width: 200,
            align: 'center',
            key: 'updTime',
        },
        {
            title: '操作',
            slot: 'Action',
            align: 'center',
        },
    ],
    load: true,
})

const initList = (page, size) => {
    formItem.pageNo = page
    formItem.pageSize = size
    table.load = true

    http.post('/Basic/Category/PageList', toRaw(formItem), (response) => {
        table.load = false
        table.data = response.data.data.list
        table.total = response.data.data.total
    })
}

initList(1, 15)

const clear = () => {
    form.value.resetFields()
}

const add = (type, data) => {
    modal.value.show(type, data)
}
const cancel = (categoryID) => {
    var categoryIDs = []
    categoryIDs[0] = categoryID
    http.post('/Basic/Category/Del', { categoryIDs: categoryIDs }, (response) => {
        if (response.data.flag) {
            searchList();
            proxy.$Message.success(response.data.msg)

        } else {
            proxy.$Message.error(response.data.msg)
        }
    })
}

let category = reactive({ categoryid: '', isGroup: false })
const treeChg = (arr, data) => {
    category.categoryid = data.categoryID
    category.isGroup = data.isGroup
}
let categoryids = ref([])
const selChg = (data) => {
    categoryids.value = data.map(x => x.categoryID)
}
const del = () => {
    if (categoryids.value.length === 0) {
        proxy.$Message.error('请从右侧列表选择科室')
        return false
    }
    http.post('/Basic/Category/Del', { categoryIDs: categoryids.value }, (response) => {
        if (response.data.flag) {
            searchList();
            proxy.$Message.success(response.data.msg)

        } else {
            proxy.$Message.error(response.data.msg)
        }
    })
}
const joinGroup = () => {
    if (category.categoryid === '') {
        proxy.$Message.error('请从左侧菜单选择医疗组')
        return false
    }
    if (!category.isGroup) {
        proxy.$Message.error('你选中的不是医疗组')
        return false
    }
    if (categoryids.value.length === 0) {
        proxy.$Message.error('请从右侧列表选择科室')
        return false
    }
    http.post('/Basic/Category/JoinGroup', { categoryID: category.categoryid, categoryIDs: categoryids.value }, (response) => {
        if (response.data.flag) {

            initTreeList()
            proxy.$Message.success(response.data.msg)

        } else {
            proxy.$Message.error(response.data.msg)
        }

    })
}

</script>